<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
      <script src="js/jquery.validate.min.js"></script>
    <script src="js/messages_zh.js"></script>
<title>注册</title>
<style type="text/css">
		#header{
		position:relative;
		height:120px;
		}
		#regist{
			position: relative;;
			margin-top:50px;
		}
		.inp{
			width:250px;
		}
		.hid{
		font-size:11px;
			display:none;
		}
.error{
	color:red;
}

</style>
</head>
<script type="text/javascript">
jQuery.validator.addMethod("isMobile", function(value, element) {
	var length = value.length;
	var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
	return this.optional(element) || (length == 11 && mobile.test(value));
}, "请正确填写您的手机号码");
	$(function(){
		
		$().ready(function() {
		    $("#registform").validate({
		    	rules: {   	    
		    	      username: {
		    	        required: true,
		    	        minlength: 3,
		    	        maxlength: 10,
		    	        remote: {
		    	            url: "validateuname",     //后台处理程序
		    	            type: "post",               //数据发送方式
		    	            dataType: "json",           //接受数据格式   
		    	            data: {                     //要传递的数据
		    	                username: function() {
		    	                    return $("#username").val();
		    	                }
		    	            }
		    	        }
		    	      },
		    	      userpsw: {
		    	        required: true,
		    	        minlength: 3
		    	      },
		    	      userrepsw: {
		    	        required: true,
		    	        minlength: 3,
		    	        equalTo: "#userpsw"
		    	      },
		    	      userphone: {
		    	        required: true,
		    	        isMobile : true,
		    	        remote: {
		    	            url: "validateuphone",     //后台处理程序
		    	            type: "post",               //数据发送方式
		    	            dataType: "json",           //接受数据格式   
		    	            data: {                     //要传递的数据
		    	                userphone: function() {
		    	                    return $("#userphone").val();
		    	                }
		    	            }
		    	        }
		    	      },
		    	    },
		    	    messages: {		    	     
		    	      username: {
		    	        required: "请输入用户名",
		    	        minlength: "用户名必需在3到16位之间",
		    	        remote:"用户名已经被注册"
		    	      },
		    	      userpsw: {
		    	        required: "请输入密码",
		    	        minlength: "密码长度不能小于 3个字母"
		    	      },
		    	      userrepsw: {
		    	        required: "请再次输入密码",
		    	        minlength: "密码长度不能小于 3个字母",
		    	        equalTo: "两次密码输入不一致"
		    	      },
		    	      userphone: { 	 
		    	      isMobile:"请正确填写您的手机号码",
		    	      required:"请输入一个正确的手机号",
		    	      remote:"手机已被注册"
		    	      }
		    	    }
		    });
		});
	});
</script>
<body>
<div style="width:100%;heigth:200px">
 <div style="background-color:#fff"><img alt="加载失败" src="img/logo.png" style="width:200px;height:150px"/></div>
  <div style="float:right; margin-top: 8px;padding-left: 20px;padding-right: 20px" ><a href="login.jsp">登录</a></div>
   <div style="float:right;margin-top: 8px;padding-left: 20px;padding-right: 20px"><a href="regist.jsp">注册</a></div>
    <div style="float:right;margin-top: 8px;padding-left: 20px;padding-right: 20px"><a href="sellerregist.jsp">申请店铺</a></div>
 </div> 
	<div class="container">
			<hr>
			<div id="main" class="row">
			<div class="col-md-1">
			</div>
				<div class="col-md-6">
				<form action="userregist" class="form-group form-inline" id="registform" method="post">
					<div id="regist">
						<div>
						 <label>用户名&nbsp;&nbsp;&nbsp;&nbsp;</label>
    					<input type="text" style="width:258px"  class="form-control " id="username" name="username"  placeholder="请设置用户名">
    					<br><br>
    					</div>
    					<div>
    					 <label>密&nbsp;&nbsp;&nbsp;码&nbsp;&nbsp;&nbsp;&nbsp;</label>
    					
    					<input type="password" style="width:258px" class="form-control " id="userpsw" name="userpsw"  placeholder="请设置密码">
    					<br><br>
    					</div>
    					<div>
    					 <label>再输一次</label>
    					
    					<input type="password" style="width:258px" class="form-control " id="userrepsw" name="userrepsw"  placeholder="请再次输入密码">
    					<br><br>
    					</div>
    					 <div>
    					 <label>手机号&nbsp;&nbsp;&nbsp;&nbsp;</label>
        				<input type="text" style="width:258px" class="form-control " id="userphone" name="userphone"  placeholder="手机号可用于登录和找回">
 						<br><br>
 						</div>
 						 <div>
    					 <label>地&nbsp;&nbsp;&nbsp;址&nbsp;&nbsp;&nbsp;&nbsp;</label>
        				<input type="text" style="width:258px" class="form-control " id="useraddr" name="useraddr"  placeholder="请输入正确的收货地址">
 						<br><br>
 						<br>
 						</div>
 						<input type="submit" value="注册" class="btn btn-default btn-lg " id="submit">
   					 	</div>
					</div>
				</form>
				<div class="col-md-4" style=" margin-top: 50px">
					<div><p>这是一个在线点餐系统</p>
					<p>你可以在这里订购美味的食物</p>
					<p>手机号码也可以用于登录</p>
					<p>已注册?返回 <a href="login.jsp">登录</a></p>
					</div>
				</div>
				<div class="col-md-1">
			</div>
				</div>
				
			</div>
	</div>
</body>
</html>